﻿@page "/PlotlyBlazorLiveChartTest"
@inject IJSRuntime jsRuntime

<h3>PlotlyBlazorLiveChartTest</h3>

@using Plotly.Blazor
@using Plotly.Blazor.Traces

<div class="controls">
    <button class="btn btn-primary" @onclick="ToggleChartMode">
        @(ShowLiveChart ? "切换到静态图表" : "切换到实时图表")
    </button>
    <div class="chart-info">
        @(ShowLiveChart ?
            "实时模式: 数据每秒更新" :
            "静态模式: 显示固定历史数据")
    </div>
</div>

<div class="chart-container">
    @if (ShowLiveChart)
    {
        <PlotlyChart @ref="plotlyChart" Config="liveChartConfig" Layout="layout" Data="liveData" />
    }
    else
    {
        <PlotlyChart @ref="plotlyChart" Config="staticChartConfig" Layout="layout" Data="staticData" />
    }
</div>

<style>
    .controls {
        margin-bottom: 20px;
        text-align: center;
    }
    
    .btn {
        padding: 10px 20px;
        font-size: 16px;
        margin-right: 15px;
    }
    
    .chart-info {
        display: inline-block;
        color: #666;
        font-style: italic;
    }
    
    .chart-container {
        width: 100%;
        height: 500px;
        border: 1px solid #ddd;
        border-radius: 8px;
        padding: 20px;
        background-color: #f9f9f9;
    }
</style>

<script src="_content/Plotly.Blazor/plotly-3.0.0.min.js"></script>
<script src="_content/Plotly.Blazor/plotly-interop-6.0.0.js"></script>
<script src="./plotlyInterop.js"></script>
